<template>
    <div class="flex-1 flex flex-col h-full">
        <!-- 搜索框和筛选 -->
        <div class="p-3 border-b border-gray-200 flex-shrink-0">
            <a-input size="small" v-model="listSearchKeyword" placeholder="搜索地址（支持拼音、首字母）" allow-clear class="mb-2">
                <template #prefix>
                    <icon-search />
                </template>
            </a-input>

            <!-- 筛选条件 -->
            <div class="flex space-x-2">
                <a-select :model-value="store.selectedCategoryFilter"
                    @update:model-value="(value: any) => store.setCategoryFilter(String(value))" size="small"
                    class="flex-1" placeholder="筛选分类">
                    <a-option value="all">全部分类</a-option>
                    <a-option v-for="category in store.addressCategories.sort((a, b) => a.order - b.order)"
                        :key="category.id" :value="category.id">
                        {{ category.name }}
                    </a-option>
                </a-select>

                <a-select :model-value="store.selectedTagFilter"
                    @update:model-value="(value: any) => store.setTagFilter(String(value))" size="small" class="flex-1"
                    placeholder="筛选标签">
                    <a-option value="all">全部标签</a-option>
                    <a-option v-for="tag in store.addressTags.sort((a, b) => a.order - b.order)" :key="tag.id"
                        :value="tag.id">
                        <div class="flex items-center space-x-2">
                            <div :style="{ backgroundColor: tag.color }" class="w-3 h-3 rounded-full"></div>
                            <span>{{ tag.name }}</span>
                        </div>
                    </a-option>
                </a-select>
            </div>
        </div> <!-- 地址列表 - 可滚动区域 -->
        <div class="flex-1 overflow-y-auto">
            <div v-if="filteredAddressList.length === 0 && store.addressList.length === 0" class="p-3">
                <a-empty description="暂无地址，请先搜索添加" />
            </div>
            <div v-else-if="filteredAddressList.length === 0 && (listSearchKeyword || store.selectedCategoryFilter !== 'all' || store.selectedTagFilter !== 'all')"
                class="p-3">
                <a-empty description="没有符合筛选条件的地址" />
            </div>
            <div v-else class="p-3 space-y-2">
                <div v-for="address in filteredAddressList" :key="address.uid"
                    class="group border border-gray-200 rounded-md p-2 hover:bg-gray-50 text-xs transition-colors">
                    <div class="flex items-start justify-between">
                        <div class="flex-1 cursor-pointer" @click="locateAddress(address)">
                            <h4 class="font-medium text-gray-900 mb-1 text-sm"
                                v-html="highlightKeyword(address.title, listSearchKeyword)"></h4>
                            <p class="text-xs text-gray-600 mb-2"
                                v-html="highlightKeyword(address.address, listSearchKeyword)">
                            </p>
                            <!-- 分类和标签选择 - 水平布局 -->
                            <div class="flex space-x-2">
                                <!-- 标签选择 (50%) -->
                                <a-dropdown @click.stop position="bottom">
                                    <a-button size="mini" class="flex-1 text-left" @click.stop>
                                        <div class="flex items-center space-x-2">
                                            <div :style="{ backgroundColor: store.addressTags.find(t => t.id === address.status)?.color || '#ccc' }"
                                                class="w-3 h-3 rounded-full"></div>
                                            <span>{{ store.getTagName(address.status) }}</span>
                                        </div>
                                    </a-button>
                                    <template #content>
                                        <a-doption v-for="tag in store.addressTags.sort((a, b) => a.order - b.order)"
                                            :key="tag.id" @click="changeAddressTag(address.uid, tag.id)">
                                            <div class="flex items-center space-x-2">
                                                <div :style="{ backgroundColor: tag.color }"
                                                    class="w-3 h-3 rounded-full"></div>
                                                <span>{{ tag.name }}</span>
                                            </div>
                                        </a-doption>
                                    </template>
                                </a-dropdown>

                                <!-- 分类选择 (50%) -->
                                <a-dropdown @click.stop position="bottom">
                                    <a-button size="mini" class="flex-1 text-left" @click.stop>
                                        {{ store.getCategoryName(address.categoryId) }}
                                    </a-button>
                                    <template #content>
                                        <a-doption
                                            v-for="category in store.addressCategories.sort((a, b) => a.order - b.order)"
                                            :key="category.id" @click="changeAddressCategory(address.uid, category.id)">
                                            {{ category.name }}
                                        </a-doption>
                                    </template>
                                </a-dropdown>
                            </div>
                        </div>
                        <div class="flex flex-col space-y-1 ml-2">
                            <a-button @click="removeAddress(address.uid)" size="mini" status="danger" type="outline"
                                class="opacity-0 group-hover:opacity-100 transition-opacity">
                                移除
                            </a-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { IconSearch } from '@arco-design/web-vue/es/icon'
import { computed, watch } from 'vue'
import { useMapStore } from '../store'
import { changeAddressCategory, changeAddressTag, getTagName, removeAddress } from '../store/address'
import { locateAddress, renderAddressMarkers } from '../store/map'
import { highlightKeyword, matchesPinyin } from '../store/utils'

const store = useMapStore()

// 使用计算属性和响应式更新
const listSearchKeyword = computed({
    get: () => store.listSearchKeyword,
    set: (value: string) => store.setListSearchKeyword(value)
})

// 过滤地址列表
const filteredAddressList = computed(() => {
    let filtered = store.addressList;

    // 按分类筛选
    if (store.selectedCategoryFilter !== "all") {
        filtered = filtered.filter(address => address.categoryId === store.selectedCategoryFilter);
    }

    // 按标签筛选
    if (store.selectedTagFilter !== "all") {
        filtered = filtered.filter(address => address.status === store.selectedTagFilter);
    }

    // 按关键词搜索
    if (store.listSearchKeyword.trim()) {
        const keyword = store.listSearchKeyword.trim();
        filtered = filtered.filter(address => {
            return matchesPinyin(address.title, keyword) ||
                matchesPinyin(address.address, keyword) ||
                getTagName(address.status).includes(keyword) ||
                store.getCategoryName(address.categoryId).includes(keyword)
        });
    }

    return filtered;
})

// 监听地址变化，重新渲染地图标记
watch(() => store.addressList, () => {
    if (store.map) {
        renderAddressMarkers()
    }
}, { deep: true })
</script>
